<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">{{ selectedSolution?.name || '流程详情' }}</text>
        <text class="page-subtitle">了解完整办理流程和所需材料</text>
      </view>
    </view>

    <!-- 方案概览 -->
    <view class="solution-overview" v-if="selectedSolution">
      <view class="overview-card">
        <view class="overview-header">
          <text class="overview-title">{{ selectedSolution.name }}</text>
          <view class="overview-badge" :class="selectedSolution.type">
            {{ selectedSolution.typeText }}
          </view>
        </view>
        <view class="overview-content">
          <text class="overview-desc">{{ selectedSolution.description }}</text>
        </view>
        <view class="overview-meta">
          <view class="meta-item">
            <text class="meta-icon">⏱️</text>
            <text class="meta-label">预计耗时</text>
            <text class="meta-value">{{ selectedSolution.duration }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-icon">💰</text>
            <text class="meta-label">预计费用</text>
            <text class="meta-value">{{ selectedSolution.cost }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-icon">📈</text>
            <text class="meta-label">成功率</text>
            <text class="meta-value">{{ selectedSolution.successRate }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 流程时间轴 -->
    <view class="timeline-section">
      <view class="section-title">办理流程</view>
      <view class="timeline-container">
        <view 
          class="timeline-item" 
          v-for="(step, index) in processSteps" 
          :key="index"
          :class="{ 
            'active': currentStep === index,
            'completed': currentStep > index,
            'upcoming': currentStep < index
          }"
        >
          <view class="timeline-dot">
            <text class="step-number" v-if="currentStep > index">✓</text>
            <text class="step-number" v-else>{{ index + 1 }}</text>
          </view>
          <view class="timeline-content">
            <view class="step-header">
              <text class="step-title">{{ step.title }}</text>
              <view class="step-status" :class="getStepStatus(index)">
                {{ getStepStatusText(index) }}
              </view>
            </view>
            <text class="step-desc">{{ step.description }}</text>
            <view class="step-meta">
              <text class="step-duration">预计耗时：{{ step.duration }}</text>
              <text class="step-cost">预计费用：{{ step.cost }}</text>
            </view>
            
            <!-- 材料清单 -->
            <view class="materials-section" v-if="step.materials && step.materials.length > 0">
              <view class="materials-header" @click="toggleMaterials(index)">
                <text class="materials-title">所需材料 ({{ step.materials.length }}项)</text>
                <text class="materials-toggle">{{ expandedMaterials.includes(index) ? '收起' : '展开' }}</text>
              </view>
              <view class="materials-list" v-if="expandedMaterials.includes(index)">
                <view 
                  class="material-item" 
                  v-for="(material, matIndex) in step.materials" 
                  :key="matIndex"
                >
                  <view class="material-info">
                    <text class="material-name">{{ material.name }}</text>
                    <text class="material-desc">{{ material.description }}</text>
                    <view class="material-tags">
                      <text 
                        class="material-tag" 
                        v-for="(tag, tagIndex) in material.tags" 
                        :key="tagIndex"
                      >
                        {{ tag }}
                      </text>
                    </view>
                  </view>
                  <view class="material-actions">
                    <button 
                      class="btn btn-outline btn-small" 
                      @click="downloadTemplate(material)"
                    >
                      下载模板
                    </button>
                    <button 
                      class="btn btn-primary btn-small" 
                      @click="viewSample(material)"
                    >
                      查看样例
                    </button>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="timeline-line" v-if="index < processSteps.length - 1"></view>
        </view>
      </view>
    </view>

    <!-- 一键生成材料 -->
    <view class="auto-generate-section" v-if="canAutoGenerate">
      <view class="generate-card">
        <view class="generate-header">
          <text class="generate-title">智能材料生成</text>
          <view class="generate-badge">AI助手</view>
        </view>
        <text class="generate-desc">基于您提供的信息，AI可以自动生成所需的法律文书和材料</text>
        <view class="generate-features">
          <view class="feature-item">
            <text class="feature-icon">🤖</text>
            <text class="feature-text">AI智能填写</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">⚡</text>
            <text class="feature-text">快速生成</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">✅</text>
            <text class="feature-text">格式规范</text>
          </view>
        </view>
        <button class="btn btn-accent btn-large" @click="startAutoGenerate">
          开始智能生成 (¥{{ autoGeneratePrice }})
        </button>
      </view>
    </view>

    <!-- 律师服务 -->
    <view class="lawyer-service-section" v-if="showLawyerService">
      <view class="service-card">
        <view class="service-header">
          <text class="service-title">专业律师服务</text>
          <view class="service-rating">
            <text class="rating-text">4.9分</text>
            <text class="rating-stars">⭐⭐⭐⭐⭐</text>
          </view>
        </view>
        <text class="service-desc">资深律师一对一指导，确保材料准备充分，提高成功率</text>
        <view class="service-features">
          <view class="feature-item">
            <text class="feature-icon">👨‍⚖️</text>
            <text class="feature-text">专业律师指导</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-text">材料审核</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">💬</text>
            <text class="feature-text">在线咨询</text>
          </view>
        </view>
        <button class="btn btn-primary btn-large" @click="contactLawyer">
          联系律师 (¥{{ lawyerServicePrice }}/小时)
        </button>
      </view>
    </view>

    <!-- 底部固定栏 -->
    <view class="bottom-summary">
      <view class="summary-info">
        <view class="summary-item">
          <text class="summary-label">总预计耗时</text>
          <text class="summary-value">{{ totalDuration }}</text>
        </view>
        <view class="summary-item">
          <text class="summary-label">总预计费用</text>
          <text class="summary-value">{{ totalCost }}</text>
        </view>
      </view>
      <button class="btn btn-accent btn-large" @click="startProcess">
        开始办理
      </button>
    </view>
  </view>
</template>

<script>
import routerManager from '../../utils/router.js'

export default {
  name: 'ProcessDetail',
  data() {
    return {
      selectedSolution: null,
      currentStep: 0,
      expandedMaterials: [],
      autoGeneratePrice: 99,
      lawyerServicePrice: 200,
      canAutoGenerate: true,
      showLawyerService: true,
      processSteps: []
    }
  },
  computed: {
    totalDuration() {
      return this.processSteps.reduce((total, step) => {
        const duration = parseInt(step.duration) || 0
        return total + duration
      }, 0) + '天'
    },
    totalCost() {
      return this.processSteps.reduce((total, step) => {
        const cost = parseFloat(step.cost.replace(/[^\d.]/g, '')) || 0
        return total + cost
      }, 0).toFixed(0) + '元'
    }
  },
  onLoad(options) {
    if (options.solution) {
      const solution = JSON.parse(decodeURIComponent(options.solution))
      this.selectedSolution = solution
      this.generateProcessSteps(solution)
    } else if (options.id && options.from === 'usage-records') {
      // 从使用记录页面跳转过来
      this.loadUsageRecordDetail(options.id)
    }
  },
  methods: {
    generateProcessSteps(solution) {
      // 根据选择的方案生成对应的流程步骤
      if (solution.name.includes('协商')) {
        this.processSteps = [
          {
            title: '准备材料',
            description: '收集相关证据和材料，包括合同、聊天记录、照片等',
            duration: '1-2天',
            cost: '免费',
            materials: [
              {
                name: '问题描述书',
                description: '详细描述纠纷情况和您的诉求',
                tags: ['必需', '自写'],
                template: 'problem_description_template.docx'
              },
              {
                name: '证据材料',
                description: '相关合同、聊天记录、照片、录音等',
                tags: ['必需', '收集'],
                template: null
              }
            ]
          },
          {
            title: '联系对方',
            description: '通过电话、微信或邮件联系对方，表达协商意愿',
            duration: '1天',
            cost: '免费',
            materials: []
          },
          {
            title: '协商谈判',
            description: '与对方进行面对面或在线协商，寻求解决方案',
            duration: '2-3天',
            cost: '免费',
            materials: []
          },
          {
            title: '达成协议',
            description: '如果协商成功，签署和解协议',
            duration: '1天',
            cost: '免费',
            materials: [
              {
                name: '和解协议',
                description: '双方签署的和解协议，明确解决方案',
                tags: ['必需', '双方签署'],
                template: 'settlement_agreement_template.docx'
              }
            ]
          }
        ]
      } else if (solution.name.includes('仲裁')) {
        this.processSteps = [
          {
            title: '准备申请材料',
            description: '准备劳动仲裁申请书和相关证据材料',
            duration: '3-5天',
            cost: '¥10',
            materials: [
              {
                name: '劳动仲裁申请书',
                description: '详细说明争议事实和请求事项',
                tags: ['必需', '正式文书'],
                template: 'labor_arbitration_application.docx'
              },
              {
                name: '身份证明',
                description: '身份证复印件',
                tags: ['必需', '个人证件'],
                template: null
              },
              {
                name: '劳动关系证明',
                description: '劳动合同、工资条、社保记录等',
                tags: ['必需', '工作证明'],
                template: null
              },
              {
                name: '证据材料',
                description: '相关证据的复印件',
                tags: ['必需', '证据'],
                template: null
              }
            ]
          },
          {
            title: '提交申请',
            description: '到劳动仲裁委员会提交申请材料',
            duration: '1天',
            cost: '¥10',
            materials: []
          },
          {
            title: '立案审查',
            description: '仲裁委员会审查申请，决定是否立案',
            duration: '5天',
            cost: '免费',
            materials: []
          },
          {
            title: '调解阶段',
            description: '仲裁委员会组织双方进行调解',
            duration: '10-15天',
            cost: '免费',
            materials: []
          },
          {
            title: '开庭审理',
            description: '如果调解失败，进行开庭审理',
            duration: '1天',
            cost: '免费',
            materials: []
          },
          {
            title: '仲裁裁决',
            description: '仲裁委员会作出裁决',
            duration: '15天',
            cost: '免费',
            materials: []
          }
        ]
      } else {
        // 诉讼流程
        this.processSteps = [
          {
            title: '准备起诉材料',
            description: '准备起诉状和相关证据材料',
            duration: '5-7天',
            cost: '按标的额计算',
            materials: [
              {
                name: '民事起诉状',
                description: '详细说明诉讼请求和事实理由',
                tags: ['必需', '正式文书'],
                template: 'civil_complaint_template.docx'
              },
              {
                name: '证据材料',
                description: '相关证据的原件和复印件',
                tags: ['必需', '证据'],
                template: null
              },
              {
                name: '身份证明',
                description: '身份证复印件',
                tags: ['必需', '个人证件'],
                template: null
              }
            ]
          },
          {
            title: '提交起诉',
            description: '到法院提交起诉材料',
            duration: '1天',
            cost: '按标的额计算',
            materials: []
          },
          {
            title: '立案审查',
            description: '法院审查起诉材料，决定是否立案',
            duration: '7天',
            cost: '免费',
            materials: []
          },
          {
            title: '庭前调解',
            description: '法院组织双方进行庭前调解',
            duration: '15天',
            cost: '免费',
            materials: []
          },
          {
            title: '开庭审理',
            description: '法院开庭审理案件',
            duration: '1天',
            cost: '免费',
            materials: []
          },
          {
            title: '法院判决',
            description: '法院作出判决',
            duration: '30天',
            cost: '免费',
            materials: []
          }
        ]
      }
    },
    
    getStepStatus(stepIndex) {
      if (this.currentStep > stepIndex) return 'completed'
      if (this.currentStep === stepIndex) return 'active'
      return 'upcoming'
    },
    
    getStepStatusText(stepIndex) {
      if (this.currentStep > stepIndex) return '已完成'
      if (this.currentStep === stepIndex) return '进行中'
      return '待开始'
    },
    
    toggleMaterials(stepIndex) {
      const index = this.expandedMaterials.indexOf(stepIndex)
      if (index > -1) {
        this.expandedMaterials.splice(index, 1)
      } else {
        this.expandedMaterials.push(stepIndex)
      }
    },
    
    downloadTemplate(material) {
      if (!material.template) {
        uni.showToast({
          title: '该材料无模板',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '下载模板',
        content: `确定下载"${material.name}"的模板文件吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '模板下载功能开发中',
              icon: 'none'
            })
          }
        }
      })
    },
    
    viewSample(material) {
      uni.showModal({
        title: material.name,
        content: `样例说明：${material.description}\n\n请参考相关法律法规和标准格式填写。`,
        showCancel: false,
        confirmText: '知道了'
      })
    },
    
    startAutoGenerate() {
      uni.showModal({
        title: '智能生成材料',
        content: `确定使用AI智能生成功能吗？费用：¥${this.autoGeneratePrice}`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '智能生成功能开发中',
              icon: 'none'
            })
          }
        }
      })
    },
    
    contactLawyer() {
      uni.showModal({
        title: '联系律师',
        content: `确定联系专业律师吗？服务费用：¥${this.lawyerServicePrice}/小时`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '律师服务功能开发中',
              icon: 'none'
            })
          }
        }
      })
    },
    
    startProcess() {
      uni.showModal({
        title: '开始办理',
        content: '确定开始办理此流程吗？您将进入进度追踪页面。',
        success: (res) => {
          if (res.confirm) {
            // 跳转到进度追踪页面
            routerManager.navigateTo('/pages/progress-tracking/index?process=' + encodeURIComponent(JSON.stringify({
              solution: this.selectedSolution,
              steps: this.processSteps
            })), {
              success: (res) => {
                console.log('跳转到进度追踪页面成功')
              },
              fail: (err) => {
                console.error('跳转失败:', err)
                alert('页面跳转失败')
              }
            })
          }
        }
      })
    },
    
    // 加载使用记录详情
    loadUsageRecordDetail(recordId) {
      // 模拟从使用记录加载详情数据
      const recordsData = {
        1: {
          name: '劳动仲裁申请书生成',
          type: 'arbitration',
          typeText: '仲裁',
          description: '因公司拖欠工资3个月，需要申请劳动仲裁',
          duration: '25-40天',
          cost: '免费',
          successRate: 85,
          caseType: '劳动纠纷',
          questionTime: '2024-01-15 14:30:00',
          currentStep: 2 // 当前正在进行第三步
        },
        2: {
          name: '民事起诉状生成',
          type: 'litigation',
          typeText: '诉讼',
          description: '租房合同违约，房东恶意扣押押金',
          duration: '60-90天',
          cost: '25-50元',
          successRate: 75,
          caseType: '合同纠纷',
          questionTime: '2024-01-14 09:15:00',
          currentStep: 4 // 已完成
        },
        3: {
          name: '交通事故责任认定申请',
          type: 'mediation',
          typeText: '调解',
          description: '机动车与非机动车碰撞事故处理',
          duration: '15-30天',
          cost: '免费',
          successRate: 90,
          caseType: '交通事故',
          questionTime: '2024-01-13 16:45:00',
          currentStep: 1 // 正在进行第二步
        },
        4: {
          name: '离婚起诉状生成',
          type: 'litigation',
          typeText: '诉讼',
          description: '夫妻感情破裂，协议离婚未果',
          duration: '60-90天',
          cost: '300元',
          successRate: 80,
          caseType: '婚姻家庭',
          questionTime: '2024-01-12 11:20:00',
          currentStep: 3 // 正在进行第四步
        },
        5: {
          name: '物业费争议调解申请',
          type: 'mediation',
          typeText: '调解',
          description: '物业服务质量问题引发的费用争议',
          duration: '15-30天',
          cost: '免费',
          successRate: 85,
          caseType: '物业纠纷',
          questionTime: '2024-01-10 15:10:00',
          currentStep: 0 // 刚开始第一步
        }
      }
      
      const recordData = recordsData[recordId]
      if (recordData) {
        this.selectedSolution = recordData
        this.currentStep = recordData.currentStep
        this.generateProcessSteps(recordData)
      } else {
        uni.showToast({
          title: '记录不存在',
          icon: 'none'
        })
        uni.navigateBack()
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: var(--background-color);
  padding-bottom: 120rpx;
}

/* 页面头部 */
.page-header {
  background: var(--card-color);
  padding: 30rpx;
  border-bottom: 1rpx solid var(--border-color);
}

.header-content {
  text-align: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-primary);
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: var(--text-secondary);
}

/* 方案概览 */
.solution-overview {
  margin: 20rpx;
}

.overview-card {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.overview-title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.overview-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.overview-badge.fast {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.overview-badge.standard {
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
}

.overview-badge.formal {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
}

.overview-content {
  margin-bottom: 25rpx;
}

.overview-desc {
  font-size: 26rpx;
  color: var(--text-secondary);
  line-height: 1.6;
}

.overview-meta {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background: var(--background-color);
  border-radius: 12rpx;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.meta-icon {
  font-size: 24rpx;
}

.meta-label {
  font-size: 20rpx;
  color: var(--text-muted);
}

.meta-value {
  font-size: 22rpx;
  font-weight: 600;
  color: var(--text-primary);
}

/* 流程时间轴 */
.timeline-section {
  margin: 20rpx;
}

.timeline-container {
  position: relative;
  padding-left: 40rpx;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 0;
  bottom: 0;
  width: 2rpx;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: 40rpx;
  padding-left: 40rpx;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -30rpx;
  top: 10rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline-item.completed .timeline-dot {
  background: var(--success-color);
  color: white;
}

.timeline-item.active .timeline-dot {
  background: var(--primary-color);
  color: white;
  animation: pulse 2s infinite;
}

.timeline-item.upcoming .timeline-dot {
  background: var(--border-color);
  color: var(--text-muted);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 36, 99, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(10, 36, 99, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 36, 99, 0);
  }
}

.step-number {
  font-size: 20rpx;
  font-weight: bold;
}

.timeline-content {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.step-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.step-status {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.step-status.completed {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.step-status.active {
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
}

.step-status.upcoming {
  background: rgba(153, 153, 153, 0.1);
  color: var(--text-muted);
}

.step-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 15rpx;
  display: block;
}

.step-meta {
  display: flex;
  gap: 30rpx;
  margin-bottom: 20rpx;
}

.step-duration, .step-cost {
  font-size: 22rpx;
  color: var(--text-muted);
}

.timeline-line {
  position: absolute;
  left: 20rpx;
  top: 40rpx;
  width: 2rpx;
  height: 40rpx;
  background: var(--border-color);
  z-index: 1;
}

/* 材料清单 */
.materials-section {
  margin-top: 20rpx;
  border-top: 1rpx solid var(--border-color);
  padding-top: 20rpx;
}

.materials-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  cursor: pointer;
}

.materials-title {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.materials-toggle {
  font-size: 22rpx;
  color: var(--primary-color);
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.material-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20rpx;
  background: var(--background-color);
  border-radius: 12rpx;
  border: 1rpx solid var(--border-color);
}

.material-info {
  flex: 1;
  margin-right: 20rpx;
}

.material-name {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8rpx;
}

.material-desc {
  font-size: 22rpx;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10rpx;
  display: block;
}

.material-tags {
  display: flex;
  gap: 8rpx;
  flex-wrap: wrap;
}

.material-tag {
  padding: 4rpx 8rpx;
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
  border-radius: 8rpx;
  font-size: 18rpx;
}

.material-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

/* 智能生成材料 */
.auto-generate-section {
  margin: 20rpx;
}

.generate-card {
  background: linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  color: white;
}

.generate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.generate-title {
  font-size: 28rpx;
  font-weight: bold;
}

.generate-badge {
  padding: 6rpx 12rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12rpx;
  font-size: 20rpx;
}

.generate-desc {
  font-size: 24rpx;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.generate-features {
  display: flex;
  gap: 30rpx;
  margin-bottom: 25rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.feature-icon {
  font-size: 32rpx;
}

.feature-text {
  font-size: 20rpx;
  opacity: 0.9;
}

/* 律师服务 */
.lawyer-service-section {
  margin: 20rpx;
}

.service-card {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.service-title {
  font-size: 28rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.service-rating {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.rating-text {
  font-size: 22rpx;
  color: var(--text-secondary);
}

.rating-stars {
  font-size: 20rpx;
}

.service-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.service-features {
  display: flex;
  gap: 30rpx;
  margin-bottom: 25rpx;
}

/* 底部汇总 */
.bottom-summary {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-color);
  padding: 20rpx 30rpx;
  border-top: 1rpx solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 20rpx;
  z-index: 100;
}

.summary-info {
  flex: 1;
  display: flex;
  gap: 30rpx;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summary-label {
  font-size: 20rpx;
  color: var(--text-muted);
  margin-bottom: 5rpx;
}

.summary-value {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.bottom-summary .btn {
  padding: 25rpx 40rpx;
  font-size: 26rpx;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .overview-meta {
    flex-direction: column;
    gap: 15rpx;
  }
  
  .meta-item {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .step-meta {
    flex-direction: column;
    gap: 10rpx;
  }
  
  .material-item {
    flex-direction: column;
    gap: 15rpx;
  }
  
  .material-actions {
    flex-direction: row;
  }
  
  .generate-features, .service-features {
    flex-direction: column;
    gap: 15rpx;
  }
  
  .summary-info {
    flex-direction: column;
    gap: 10rpx;
  }
}
</style>
